<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <button onclick="setNum(200)">{{num}}</button>
    <button v-on:click="num++">{{num}}</button>
    <button v-on:click="setNum">{{num}}</button>
    <button v-on:click="setNum2.call({},2)">{{num}}</button>
    <button v-on:click="setNum2.bind()(3)">{{num}}</button>
    <button v-on:click="setNum2(4)">{{num}}</button>
    <button v-on:click="setNum3">{{num}}</button>
    <button v-on:click="setNum4($event,10)">{{num}}</button>
    <button v-on:click="alert('1')">{{num}}</button>
</div>
</body>
<script>
    const vm = new Vue({
        el: "#root",
        data:{
            num:1000
        },
        methods:{
            setNum(){
                this.num = 900
            },
            setNum2(num){
                console.log(11111,this)
                this.num+=num;
            },
            setNum3(e,num){
                console.log(e.target.innerHTML);
                // this.num+=num;
            },
            setNum4(e,num){
                console.log(e,num);
                this.num+=10;
            },
            alert(num){
                alert(num);
            }
        }
    });
    const setNum = function(num){
        vm.num = num;
    }
</script>
</html>